<template>
	<view style="width: 100%;height: 100vh;background-color: #f1f1f1;">
		<view v-if="place" class="theme-container" style="width: 100%;padding: 0 10px;margin-bottom: 10px;">
			<!-- 顶部占位 -->
			<view :style="'height:' + sConf.tH + 'px;'"> </view>
			<!-- 企业名片 -->
			<sub-shoped-card :place="place" follow></sub-shoped-card>
		</view>
		<!-- 产品列表 -->
		<view style="width: 100%;padding: 0 10px;border-radius: 20px;background-color: #fff;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="color:#888;display: flex;align-items: center;gap: 30px;">
					<view :class="{ 'action': filter === 0 }" @click="sortChange(0)">综合</view>
					<view :class="{ 'action': filter === 1 }" @click="sortChange(1)">销量</view>
					<view :class="{ 'action': filter === 2 }" @click="sortChange(2)">新品</view>
					<view style="display: flex;align-items: center;" @click="sortChange(3)">
						<view :class="{ 'action': filter === 3 }"> 价格 </view>
						<view style="display: flex;flex-direction: column;">
							<tn-icon name="up-triangle" offset-top="15"
								:color="filter === 3 && sort ? '#00b09b' : '#888'"></tn-icon>
							<tn-icon name="down-triangle" offset-top="-10"
								:color="filter === 3 && !sort ? '#00b09b' : '#888'"></tn-icon>
						</view>
					</view>
				</view>
				<view style="padding: 0 5px;" @click="() => { this.line = !this.line }">
					<tn-icon v-if="line" name="menu-list"></tn-icon>
					<tn-icon v-else name="menu-more"></tn-icon>
				</view>
			</view>
			<scroll-view class="mainScrollBlock" scroll-y :style="{ height: topH + 'px' }" @scrolltolower="scrollNext">
				<view v-if="goodData.length === 0" style="padding: 20px 0;"> <tn-empty mode="data"></tn-empty> </view>
				<template v-if="line">
					<TnListItem v-for="(item, index) in goodData" :key="index">
						<sub-product-card :line="line" :data="item" cart @puctPlay="EventNavProduct" />
					</TnListItem>
				</template>
				<tn-water-fall v-if="!line" :data="goodData" mode="calc">
					<template #left="{ item }">
						<sub-product-card :line="line" :data="item" @puctPlay="EventNavProduct" />
					</template>
					<template #right="{ item }">
						<sub-product-card :line="line" :data="item" @puctPlay="EventNavProduct" />
					</template>
				</tn-water-fall>

				<view style="height: 40px;"></view>
			</scroll-view>
		</view>
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff">
			<tn-search-box v-model="searchValue" placeholder="搜店内商品" shape="round" :border="false"
				:search-button="false" size="sm"
				style="background-color: #f1f1f1;width: 100%;border-radius: 10px;margin: 0 5px;" />
		</tn-navbar>
	</view>
</template>

<script>
import utils from '@/common/utils';
export default {
	data() {
		return {
			page: 1,
			topH: 100, // 滚动高度
			title: ' • 我的店铺',
			sConf: getApp().globalData,
			searchValue: '',
			place: null,
			filter: 0, //筛选
			sort: true, // 排序
			line: false, // 单行显示
			goodData: [], // 商品列表

		}
	},
	onLoad(args) {
		const pid = Number(args.pid || 1);
		console.log('onLoad', pid);

		utils.authenticatorOnRead(this.sConf.host + '/weapps/placeList/' + pid + '/', this.sConf.token).then(res => {
			console.log('加载店铺', res);
			this.place = res
			this.loadProductFromPlace(res.id);
			this.designLayout()
		}).catch(err => {
			console.log('加载店铺__失败', err);
		})

	},
	onReady() {
		console.log('onReady');
	},
	methods: {
		sortChange(e) {
			if (e < 3) {
				this.filter = e
			} else {
				if (this.filter === 3) {
					this.sort = !this.sort
				} else {
					this.filter = 3
				}
			}
			this.loadProductFromPlace(this.place.id);
		},
		scrollNext() {
			this.page++
			this.loadProductFromPlace(this.place.id);
		},
		loadDefData() {
			console.log('初始化');
		},
		designLayout() {
			console.log('计算窗口布局');
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.mainScrollBlock').boundingClientRect();
				query.exec((res) => {
					this.topH = this.sConf.iH - res[0].top;
				});
			})
		},
		/**
		 * 加载商品列表
		 * @param {Object} e
		 */
		loadProductFromPlace(e) {
			let host = this.sConf.host + '/weapps/product/'
			let token = this.sConf.token || ''
			let data = {
				pid: e,
				page: this.page,
				status: 1,
				is_list: 1, is_card: 0
			}
			if (this.filter === 1) {
				data.ordering = '-hot'
			}
			if (this.filter === 2) {
				data.ordering = '-id'
			}
			if (this.filter === 3 && this.sort) {
				data.ordering = 'cur_price'
			}
			if (this.filter === 3 && !this.sort) {
				data.ordering = '-cur_price'
			}
			utils.authenticatorOnList(host, token, data).then(res => {
				console.log("加载商品列表", res);
				if (this.page > 1) {
					this.goodData.push(res)
				} else {
					this.goodData = res
				}
			}).catch(err => {
				console.log("加载商品列表__失败", err);
				if (this.page > 1) {
					this.page--
				}
				console.log(this.page)
			})

		},
		/**
		 * nav商品详情
		 */
		EventNavProduct(e) {
			uni.redirectTo({
				url: '/pageb/puctplay/puctplay?puct=' + e
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.action {
	color: $uni-color-banner;
}
</style>